<template>
	<view class="fireFacilities ff-font-14">
		<view class="fireFacilities-content">
			<view class="fireFacilities-content-title ff-bg-fff ff-border-radius-5">
				<view class="ff-flex-between ff-relative ff-border-bottom">
					<view class="fireFacilities-content-box-title ff-padding-bottom-15 ff-font-16 ff-font-weight-600">
						维保设施
					</view>
					<view class="addFireFacilities" v-if="facilitiesListOther.length > 0 && paramsInfo.practiceState"
						@click="addFacilitiesClick">新增</view>
				</view>
				<view v-if="fireFacilitiesList.length < 1"
					class="ff-bg-fff ff-padding-top-15 ff-padding-left-5 ff-padding-bottom-30">暂无维保设施</view>
			</view>
			<view>
				<view v-if="fireFacilitiesList.length > 0">
					<view v-for="(item, index) of fireFacilitiesList" :key="index"
						class="fireFacilities-content-box ff-bg-fff ff-border-radius-5 ff-solid-bottom ff-line-height-1-3">
						<view class="fireFacilities-content-box-title ff-flex-between ff-align-items-one"
							@click="cuIconClick(index)">
							<view :class="{ 'ff-color-blue': item.isCheckState }" class="ff-font-15 ff-font-weight-600">
								{{ index + 1 }}.&nbsp;{{ item.facilitiesItemName }}
							</view>
							<view class="ff-align-items-one">
								<!-- isExtra 是否是额外添加的消防设施 ： 1.是 0.否 -->
								<view class="ff-color-red ff-margin-right-15"
									v-if="item.isExtra == 1 && paramsInfo.practiceState"
									@click.stop="deleteOtherFacilities(item)">删除</view>
								<view>
									<view v-if="!item.isCheckState"><u-icon name="arrow-down" color="#0B204B"
											size="36"></u-icon>
									</view>
									<view v-else><u-icon name="arrow-up" color="#3178FF" size="36"></u-icon></view>
								</view>
							</view>
						</view>
						<view v-if="item.isCheckState" class="ff-font-14">
							<view class="ff-padding-top-25 ff-border-bottom ff-padding-bottom-17 ff-flex-between">
								<view>保养内容</view>
								<view class="ff-color-999">
									{{ item.facilitiesItemContent == null ? '/' : item.facilitiesItemContent }}
								</view>
							</view>
							<view
								class="ff-padding-top-17 ff-border-bottom ff-align-items-1 ff-padding-bottom-17 ff-flex-between">
								<view>部位</view>
								<view class="ff-color-222">
									<input type="text" v-model.trim="item.position"
										:disabled="!paramsInfo.practiceState" :placeholder="isPlaceholder"
										class="ff-text-right" />
								</view>
							</view>
							<view
								class="ff-padding-top-17 ff-border-bottom ff-align-items-1 ff-padding-bottom-17 ff-flex-between">
								<view>总数</view>
								<view class="ff-color-999"><input type="number" v-model.trim="item.number"
										:disabled="true" class="ff-text-right" /></view>
							</view>
							<view
								class="ff-padding-top-17 ff-align-items-1 ff-border-bottom ff-padding-bottom-17 ff-flex-between">
								<view>抽查数量</view>
								<view class="ff-color-222">
									<input type="number" v-model.trim="item.checkNum"
										:disabled="!paramsInfo.practiceState" :placeholder="isPlaceholder"
										class="ff-text-right" />
								</view>
							</view>
							<view @click="textClick(item.problem)"
								class="ff-padding-top-17 ff-border-bottom ff-padding-bottom-17" v-show="resulltText">
								<view class="ff-margin-bottom-15">问题/建议</view>
								<textarea :class="{textareaHeight:autoHeight}" :auto-height="autoHeight"
									:value="item.problem" @input="handleText($event,index)" maxlength="-1"
									:disabled="!paramsInfo.practiceState" placeholder="请输入问题/建议"
									class="ff-color-222 ff-letter-spacing-1 ff-border-radius-10" />
							</view>
							<view
								class="ff-padding-top-17 ff-border-bottom ff-padding-bottom-17 ff-flex-between ff-align-items-one">
								<view>结果</view>
								<u-radio-group v-model="item.checkResult" :size="40" :icon-size="25">
									<u-radio v-for="items of radioList" :key="items.id"
										:disabled="!paramsInfo.practiceState" :name="items.id">
										<text class="radioText"
											@click.stop="radioChange(items.id, index)">{{ items.name }}</text>
									</u-radio>
								</u-radio-group>
							</view>
						</view>
					</view>
				</view>
				<!-- 消防设施选择 -->
				<u-select v-model="facilitiesOtherState" mode="single-column" :list="facilitiesListOther"
					:safe-area-inset-bottom="true" label-name="facilitiesItemName" value-name="facilitiesItemId"
					title="新增消防设施" @cancel="facilitiesOtherCancel" @confirm="facilitiesOtherConfirm"></u-select>
			</view>
		</view>
		<view class="fireFacilities-imgBox ff-padding-10 ff-margin-10 ff-bg-fff ff-border-radius-5">
			<view
				class="fireFacilities-content-box-title ff-margin-bottom-10 ff-font-16 ff-font-weight-600 ff-padding-bottom-10 ff-border-bottom">
				执业过程</view>
			<view class="tipsBox ff-font-12 ff-margin-bottom-8 ff-line-height-1-3" v-if="firePracticeImgsTipsList">
				<view class="tipsBox-title">请按要求拍摄本次维保的消防设施，每项至少拍摄一张照片，如本次不维保的消防设施可不拍。<br />
					* 请注意：执业过程中，您仅能删除自己拍摄的照片</view>
				<view class="tipsBox-content ff-padding-left-11 ff-relative ff-margin-bottom-8"
					v-for="(item, index) of firePracticeImgsTipsList" :key="index">
					&nbsp;{{`${item.facilitiesItemName}: ${item.picturesContent}`}}
				</view>
			</view>
			<view>
				<view v-if="paramsInfo.practiceState">
					<view>
						<u-row gutter="20">
							<u-col span="3" v-for="(item, index) of firePracticeImgsList" :key="index">
								<view class="ff-margin-top-8 ff-relative" @click="previewClick(item.attachUrl)">
									<!--  referrer="no-referrer|origin|unsafe-url" -->
									<image class="fireFacilities-imgBox-img" :src="item.attachUrl" mode="" />
									<view v-if="item.creater == userInfo.id" @click.stop="deteleImgClick(index, item)"
										class="closeIcon"><u-icon name="close" color="#fff" size="22"></u-icon></view>
								</view>
							</u-col>
							<u-col span="3">
								<image class="fireFacilities-imgBox-img ff-margin-top-8" @click="photographClick"
									src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/upate-icon.png"
									mode="" />
							</u-col>
						</u-row>
					</view>
					<view v-if="firePracticeImgsList">
						<view class="ff-color-999 ff-margin-top-10 ff-padding-left-5 ff-font-14 ff-padding-bottom-30"
							v-if="firePracticeImgsList.length < 1 && !paramsInfo.practiceState">暂无执业图片</view>
					</view>
				</view>
				<view v-else>
					<u-row gutter="20">
						<u-col span="3" v-for="(item, index) of firePracticeImgsList" :key="index">
							<view class="ff-margin-top-8" @click="previewClick(item.attachUrl)">
								<image class="fireFacilities-imgBox-img" :src="item.attachUrl" mode="" />
							</view>
						</u-col>
					</u-row>
					<view v-if="firePracticeImgsList">
						<view v-if="firePracticeImgsList.length < 1"
							class="ff-color-999 ff-padding-left-5  ff-padding-bottom-30 ff-font-14 ff-margin-top-8">
							暂无执业图片</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fireFacilities-but" v-if="paramsInfo.practiceState"><u-button @click="saveFacilitiesClick"
				type="primary" shape="circle">保存</u-button></view>
		<u-back-top :scrollTop="scrollTopList.scrollTop" top="200" bottom="360" mode="circle"
			:iconStyle="scrollTopList.iconStyle" :customStyle="scrollTopList.customstyle"></u-back-top>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<u-modal v-model="deleteFacilitiesModal" @confirm="deleteFacilitiesConfirm" @cancel="deleteFacilitiesCancel"
			:show-cancel-button="true" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			:content="deleteFacilitiesContent" />
		<!-- helangCompress-压缩图片 -->
		<f-compressImg ref="helangCompress" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name: 'fireFacilities',
		data() {
			return {
				autoHeight: true, // textarea是否自适应
				// 返回顶部组件参数
				scrollTopList: {
					scrollTop: 0,
					iconStyle: {
						fontSize: '32rpx',
						color: '#FFFFFF'
					},
					customstyle: {
						background: '#3B83FE'
					}
				},
				radioList: [{
						name: '正常',
						id: 0
					},
					{
						name: '异常',
						id: 1
					}
				],
				facilitiesOtherState: false, // 消防设施列表弹窗显/隐
				deleteFacilitiesModal: false, // 删除消防设施弹窗显/隐
				deleteFacilitiesContent: '', // 删除消防设施弹窗内容
				deleteFacilitiesItem: {}, // 删除消防设施弹窗当前选中的内容
				facilitiesListOther: [], // 剩余的消防设施
				paramsInfo: {}, // 前边页面传过来的参数
				fireFacilitiesList: [], // 消防设施列表
				firePracticeImgsTipsList: [], // 设备照片提示语
				firePracticeImgsList: [], // 执业图片
				firePracticeImgsListTemporary: [], // 执业图片临时
				cacheDevicePics: [], // 本地缓存的设备照片（后台返回的照片+新拍的照片）
				uploadNewImgs: [], // 当前新拍照的图片
				uploadImgsNum: '', // 要上传到服务器照片集合的长度
				// 要上传的数据------（消防设施和执业图片）
				saveParams: {
					items: [],
					attachs: []
				},
				backState: false, // 是否返回上一层页面
				resulltText: true, // 文本框显/隐
				handleSave: '', // 新增或者删除时候保存数据 1 新增  3 删除
				addList: {}, // 点击新增的数据
				cacheState: false, // 缓存的状态
				scrollTopPosition: '', // 当前页面滑动的位置
			};
		},
		onPageScroll(e) {
			this.scrollTopList.scrollTop = e.scrollTop;
			this.scrollTopPosition = e.scrollTop // 当前滑动的位置
		},
		// 页面加载---用于传参
		mounted() {
			uni.$on('refreshPreviousPage', (data) => {
				// console.log('监听相机页面返回的数据-----', data)
				this.firePracticeImgsList = data.firePracticeImgsList
				this.firePracticeImgsListTemporary = this.firePracticeImgsList
				this.cacheDevicePics = data.cacheDevicePics
			});
		},
		onLoad(e) {
			// console.log('维保执业页面接受的上一个页面的数据--', e)
			let that = this;
			that.getTelInfo() // 获取机型
			that.paramsInfo = JSON.parse(e.paramsInfo);
			// 判断当前网络-------状态
			uni.getNetworkType({
				complete: res => {
					let networkType = res.networkType || 'none';
					if (networkType == 'none' && that.paramsInfo.practiceState) {
						uni.showModal({
							title: '网络不可用',
							content: '您填写的数据将被保存到本地，请在有网络的情况下进行上传数据',
							showCancel: false, // 隐藏取消按钮
							confirmText: '确定',
							confirmColor: '#3178FF',
							cancelColor: '#606266',
							success: res => {
								if (res.confirm) {
									that.$refs.loading.closeLoading();
									that.fireFacilitiesList = uni.getStorageSync(
										'allMaintenanceFacilities')[that
										.paramsInfo.index].mainFacilitiesItems; // 设施列表
									that.fireFacilitiesList.forEach(item => {
										that.$set(item, 'isCheckState', true);
										if (!item.problem) {
											item.problem = ''
										}
									});
									that.firePracticeImgsList = uni.getStorageSync(
										'allMaintenanceFacilities')[
										that.paramsInfo.index].mainFacilitiesAttachList; //设备照片
									if (that.firePracticeImgsList) {
										// 要上传到服务器的照片
										let imgList = [];
										that.firePracticeImgsList.map(res => {
											imgList.push({
												id: res.id,
												creater: res.creater,
												names: res.attachUrl.substring(res
													.attachUrl
													.lastIndexOf('\/') + 1,
													res.attachUrl
													.length - 4
												), // js截取最后一个特定字符后面的字符串
												attachUrl: res.attachUrl,
												tips: 2
											});
										});
										that.cacheDevicePics =
											imgList; // 要上传得照片集合(后台返回的数据+要拍的照片)
									}
									setTimeout(() => {
										that.getInspectInfo(); // 检测本地是否有缓存数据
									}, 300);
								}
							}
						});
					} else if (networkType == 'none' && !that.paramsInfo.practiceState) {
						that.$refs.loading.closeLoading();
						that.fireFacilitiesList = uni.getStorageSync('allMaintenanceFacilities')[that
								.paramsInfo.index]
							.mainFacilitiesItems; // 设施列表
						that.fireFacilitiesList.forEach(item => {
							that.$set(item, 'isCheckState', true);
							if (!item.problem) {
								item.problem = '/'
							}
						});
						that.firePracticeImgsList = uni.getStorageSync('allMaintenanceFacilities')[that
							.paramsInfo
							.index].mainFacilitiesAttachList; //设备照片
					} else {
						that.$refs.loading.closeLoading();
						that.getFireFacilitiesList(that.paramsInfo.fireFacilitiesId); // 获取消防设施列表
						that.getFireImgList(that.paramsInfo.fireFacilitiesId); // 获取执业图片
						that.getFacilitiesListOther(); // 获取剩余维保设施数据列表
						setTimeout(() => {
							that.getInspectInfo(); // 检测本地是否有缓存数据
						}, 300);
					}
				}
			});
			// 获取设备上传的提示语
			that.firePracticeImgsTipsList = uni.getStorageSync('allMaintenanceFacilities')[that.paramsInfo.index]
				.tipsList //设备照片提示语
		},
		computed: {
			isPlaceholder() {
				return this.paramsInfo.practiceState == true ? '请输入' : '/';
			},
			...mapState({
				userInfo: modules => modules.infoList.userInfo
			})
		},
		methods: {
			...mapMutations(['setAllMaintenanceFacilities']),
			// 获取当前手机信息
			getTelInfo() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						// console.log('当前机型信息', res.deviceBrand)
						if (res.deviceBrand == 'vivo') {
							that.autoHeight = false
						} else {
							that.autoHeight = true
						}
					}
				});
			},
			// 复制小项textarea问题的内容
			textClick(txt) {
				if (!this.paramsInfo.practiceState) {
					uni.setClipboardData({
						data: txt, //要被复制的内容
						success: () => { //复制成功的回调函数
							uni.showToast({ //提示
								title: '复制成功'
							})
						}
					});
				}
			},
			// 小项的textarea单向输出 监听赋值
			handleText(e, index) {
				// console.log('监听内容', e, index)
				this.fireFacilitiesList[index].problem = e.detail.value
				// console.log(this.fireFacilitiesList)
			},
			// 获取维保记录详情页所有数据（包括消防设施和图片）
			async getAllDetails() {
				this.$refs.loading.openLoading('加载中···');
				const data = await this.$http.post({
					url: `/maintenance/detailV3/${this.paramsInfo.id}`
				}).then(res => {
					// console.log('详情页数据---所有的', res.data);
					if (res.code == 200) {
						this.$refs.loading.closeLoading();
						this.setAllMaintenanceFacilities(data.data.mainBuilding
							.mainBuildingFacilities); // 把数据储存到vuex
						uni.setStorageSync('allMaintenanceFacilities', data.data.mainBuilding
							.mainBuildingFacilities); // 把数据储存到本地
					}
				});
			},
			// 检测本地是否有缓存数据
			async getInspectInfo() {
				let that = this;
				that.$refs.loading.openLoading();
				if (uni.getStorageSync(that.paramsInfo.fireFacilitiesId) && that.paramsInfo.practiceState) {
					uni.showModal({
						title: '温馨提示',
						content: '本页面有您填写的内容，可进行编辑和保存。',
						showCancel: false, // 不展示取消按钮
						confirmColor: '#3178FF',
						cancelColor: '#606266',
						confirmText: '确定',
						success: res => {
							if (res.confirm) {
								that.cacheState = true
								that.firePracticeImgsList = [];
								that.cacheDevicePics = [];
								that.$refs.loading.closeLoading();
								that.fireFacilitiesList = uni.getStorageSync(that.paramsInfo
										.fireFacilitiesId)
									.fireFacilitiesList; // 消防设施列表
								that.fireFacilitiesList.forEach(item => {
									that.$set(item, 'isCheckState', true);
									if (!item.problem) {
										if (that.paramsInfo.practiceState) {
											item.problem = ''
										} else {
											item.problem = '/'
										}
									}
								});
								that.firePracticeImgsList = uni.getStorageSync(that.paramsInfo
										.fireFacilitiesId)
									.firePracticeImgsList; // 执业图片
								that.cacheDevicePics = uni.getStorageSync(that.paramsInfo.fireFacilitiesId)
									.cacheDevicePics; // 本地缓存的设备照片（后台返回的照片+新拍的照片）
							}
						}
					});
				}
				that.$refs.loading.closeLoading();
			},
			// 获取消防设施列表
			async getFireFacilitiesList(id) {
				this.$refs.loading.openLoading('加载中···');
				const data = await this.$http.post({
					url: `/maintenance/maintenance/facilities/${id}/items`
				});
				// console.log('获取消防设施列表-----', data);
				if (data.code == 200) {
					this.$refs.loading.closeLoading();
					this.fireFacilitiesList = data.data;
					this.fireFacilitiesList.forEach(item => {
						this.$set(item, 'isCheckState', true);
						if (!item.problem) {
							if (this.paramsInfo.practiceState) {
								item.problem = ''
							} else {
								item.problem = '/'
							}
						}
					});
					// console.log(this.fireFacilitiesList)
				} else {
					this.$refs.loading.closeLoading();
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
			},
			// 点击展开和收起消防设施
			cuIconClick(idx) {
				this.fireFacilitiesList[idx].isCheckState = !this.fireFacilitiesList[idx].isCheckState;
			},
			// 点击选择维保结果（单选）
			radioChange(e, index) {
				// console.log('点击选择维保结果', e, index)
				if (this.paramsInfo.practiceState) {
					e != this.fireFacilitiesList[index].checkResult ? (this.fireFacilitiesList[index].checkResult = e) : (
						this
						.fireFacilitiesList[index].checkResult = '99');
				}
				// console.log(this.fireFacilitiesList[index].checkResult)
			},
			// 获取执业图片
			async getFireImgList(id) {
				this.$refs.loading.openLoading('加载中···');
				const data = await this.$http.post({
					url: `/maintenance/maintenance/facilities/${id}/attachV2`
				});
				// console.log('获取执业图片-----', data);
				if (data.code == 200) {
					this.firePracticeImgsList = data.data;
					let imgList = [];
					this.firePracticeImgsList.map(res => {
						imgList.push({
							id: res.id,
							creater: res.creater,
							names: res.attachUrl.substring(res.attachUrl.lastIndexOf('\/') + 1, res
								.attachUrl.length -
								4), // js截取最后一个特定字符后面的字符串
							attachUrl: res.attachUrl,
							tips: 2 // 后台传过来的给个标识--2，新拍照的为--1
						});
					});
					this.firePracticeImgsListTemporary = this.firePracticeImgsList
					this.cacheDevicePics = imgList; // 要上传得照片集合
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading();
			},
			// 获取执业图片----删除别人图片或者删除消防措施后
			async getFireImgListOther(id) {
				this.$refs.loading.openLoading('加载中···');
				const data = await this.$http.post({
					url: `/maintenance/maintenance/facilities/${id}/attachV2`
				});
				// console.log('获取执业图片----删除别人图片或者删除消防措施后-----', data);
				// console.log(this.firePracticeImgsList, 'this.firePracticeImgsList')
				if (data.code == 200) {
					// console.log(this.firePracticeImgsListTemporary, 'this.firePracticeImgsListTemporary')
					if (this.uploadNewImgs.length > 0) {
						// this.firePracticeImgsList = this.firePracticeImgsListTemporary
						this.firePracticeImgsList = data.data.concat(this.uploadNewImgs);
						let imgList = [];
						this.firePracticeImgsList.map(res => {
							imgList.push({
								id: res.id,
								creater: res.creater,
								names: res.attachUrl.substring(res.attachUrl.lastIndexOf('\/') + 1, res
									.attachUrl.length -
									4), // js截取最后一个特定字符后面的字符串
								attachUrl: res.attachUrl,
								tips: res.tips || 2 // 后台传过来的给个标识--2，新拍照的为--1
							});
						});
						this.cacheDevicePics = imgList; // 要上传得照片集合
					} else {
						this.firePracticeImgsList = data.data;
						let imgList = [];
						this.firePracticeImgsList.map(res => {
							imgList.push({
								id: res.id,
								creater: res.creater,
								names: res.attachUrl.substring(res.attachUrl.lastIndexOf('\/') + 1, res
									.attachUrl.length -
									4), // js截取最后一个特定字符后面的字符串
								attachUrl: res.attachUrl,
								tips: 2 // 后台传过来的给个标识--2，新拍照的为--1
							});
						});
						this.cacheDevicePics = imgList; // 要上传得照片集合
					}
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading();
			},
			// -----------------新增消防设施----------------------
			// 获取剩余维保设施数据列表
			async getFacilitiesListOther() {
				this.$refs.loading.openLoading('加载中···');
				const data = await this.$http.post({
					url: `/maintenance/listOtherItems`,
					data: {
						maintenanceId: this.paramsInfo.id,
						facilitiesTypeId: this.paramsInfo.facilitiesTypeId
					}
				});
				// console.log('获取剩余维保设施数据列表------', data);
				if (data.code == 200) {
					this.$refs.loading.closeLoading();
					this.facilitiesListOther = data.data;
				} else {
					this.$refs.loading.closeLoading();
				}
			},
			// 打开新增消防设施弹窗
			addFacilitiesClick() {
				this.resulltText = false;
				this.facilitiesOtherState = true;
			},
			// 关闭新增消防设施弹窗
			facilitiesOtherCancel() {
				this.resulltText = true;
			},
			// 新增消防设施---确定操作
			facilitiesOtherConfirm(e) {
				this.addList = e
				this.handleSave = 1;
				this.saveFacilitiesClick(); // 保存数据
			},
			// 新增消防设施---确定操作-----保存后跳转到这里(新增操作)
			facilitiesOtherAdd(e) {
				this.$refs.loading.openLoading('新增中···');
				let params = {
					maintenanceId: this.paramsInfo.id,
					facilitiesItemId: e[0].value
				};
				this.$http
					.post({
						url: '/maintenance/addOtherItem',
						data: params
					})
					.then(res => {
						this.resulltText = true; // 文本框显隐
						this.handleSave = ''; // 新增或者删除操作保存的显隐
						// console.log('新增消防设施---返回结果', res);
						this.$refs.loading.closeLoading();
						if (res.code == 200) {
							// this.getFireImgListOther(this.paramsInfo.fireFacilitiesId); // 获取执业图片
							this.getFireFacilitiesList(this.paramsInfo.fireFacilitiesId); // 获取消防设施列表
							this.getFacilitiesListOther(); // 获取剩余维保设施数据列表
							this.$refs.uToast.show({
								title: '新增成功',
								type: 'success'
							});
						} else {
							// this.getFireImgList(this.paramsInfo.fireFacilitiesId); // 获取执业图片
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
					});
			},
			// 新增消防设施---打开删除弹窗操作
			deleteOtherFacilities(item) {
				this.resulltText = false;
				this.deleteFacilitiesItem = item;
				this.deleteFacilitiesContent = `您确定删除“${item.facilitiesItemName}”吗？`;
				this.deleteFacilitiesModal = true;
			},
			// 新增消防设施---取消删除操作
			deleteFacilitiesCancel() {
				this.resulltText = true;
			},
			// 新增消防设施---确定删除操作
			deleteFacilitiesConfirm() {
				this.handleSave = 3;
				this.saveFacilitiesClick(); // 保存数据
			},
			// 新增消防设施---确定删除操作(确定操作)
			deleteFacilitiesHandle() {
				this.$refs.loading.openLoading('删除中···');
				let params = {
					maintenanceId: this.paramsInfo.id,
					facilitiesItemId: this.deleteFacilitiesItem.facilitiesItemId
				};
				this.$http
					.post({
						url: '/maintenance/removeOtherItem',
						data: params
					})
					.then(res => {
						// console.log('删除消防设施---返回结果', res);
						this.$refs.loading.closeLoading();
						this.resulltText = true;
						this.handleSave = '';
						if (res.code == 200) {
							// this.getFireImgListOther(this.paramsInfo.fireFacilitiesId); // 获取执业图片
							this.getFireFacilitiesList(this.paramsInfo.fireFacilitiesId); // 获取消防设施列表
							this.getFacilitiesListOther(); // 获取剩余维保设施数据列表
							this.$refs.uToast.show({
								title: '删除成功',
								type: 'success'
							});
						} else {
							// this.getFireImgList(this.paramsInfo.fireFacilitiesId); // 获取执业图片
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
					});
			},
			//----------上传照片--------------------
			// 手机拍照上传图片
			photographClick() {
				const {
					cameraAuthorized,
					microphoneAuthorized,
					osName
				} = uni.getSystemInfoSync()

				if (!cameraAuthorized) {
					uni.showModal({
						title: '提示',
						content: '您关闭了摄像头权限，请允许微信使用摄像头权限',
						confirmText: '去设置',
						confirmColor: '#3178FF',
						success: (res) => {
							if (res.confirm) {
								uni.openAppAuthorizeSetting()
							}
						}
					})
					return
				}
				// ios 摄像头&麦克风绑定
				if (!microphoneAuthorized && osName === 'ios') {
					uni.showModal({
						title: '提示',
						content: '您关闭了麦克风权限，请允许微信使用麦克风权限',
						confirmText: '去设置',
						confirmColor: '#3178FF',
						success: (res) => {
							if (res.confirm) {
								uni.openAppAuthorizeSetting()
							}
						}
					})
					return
				}
				if (this.cacheDevicePics.length < 1) {
					this.cacheDevicePics = []
				}
				// uni.setStorageSync('scrollTopPosition', this.scrollTopPosition) // 当前位置
				let params = {
					cacheDevicePics: this.cacheDevicePics,
					firePracticeImgsList: this.firePracticeImgsList
				}
				this.$pageJump.navigateTo(
					'/pages/maintenance/mechanism/home/components/mechanismWork/components/cameraUnitFacilities?params=' +
					JSON.stringify(params)
				)
			},
			// 预览测试打印条的照片
			previewClick(img) {
				let imgsList = []
				this.firePracticeImgsList.map(res => {
					imgsList.push(res.attachUrl)
				})
				uni.previewImage({
					current: img,
					urls: imgsList
				});
			},
			// 删除执业照片
			deteleImgClick(index, itemImgs) {
				let that = this;
				uni.showModal({
					title: '温馨提醒',
					content: '您确定要删除这张照片吗？',
					confirmColor: '#3178FF',
					cancelColor: '#606266',
					success: res => {
						if (res.confirm) {
							that.firePracticeImgsList.forEach((firePracticeItem, firePracticeIndex) => {
								if (firePracticeItem.attachUrl == itemImgs.attachUrl) {
									that.firePracticeImgsList.splice(firePracticeIndex, 1); // 当前展示的图片
								}
							})
							that.cacheDevicePics.forEach((cacheItem, cacheIndex) => {
								if (cacheItem.attachUrl == itemImgs.attachUrl) {
									that.cacheDevicePics.splice(cacheIndex, 1); // 当前展示的图片
								}
							})
							this.firePracticeImgsListTemporary = this.firePracticeImgsList
							// console.log(that.firePracticeImgsList, 'that.firePracticeImgsList')
							// console.log(that.firePracticeImgsList, 'that.firePracticeImgsListTemporary')
							// console.log(that.cacheDevicePics, 'that.cacheDevicePics')
							that.$refs.uToast.show({
								title: '删除成功',
								type: 'success'
							});
						}
					}
				});
			},
			// 保存操作--------------------------------
			saveFacilitiesClick() {
				let that = this;
				that.$refs.loading.openLoading('保存中···'); // 打开loading动画
				uni.getNetworkType({
					success: function(res) {
						// console.log('网络情况了------', res.networkType);
						// 无网络的情况下---------
						if (res.networkType == 'none') {
							let params = {
								fireFacilitiesList: that.fireFacilitiesList, // 消防设施列表
								firePracticeImgsList: that.firePracticeImgsList, // 执业图片
								cacheDevicePics: that.cacheDevicePics // 本地缓存的设备照片（后台返回的照片+新拍的照片）
							};
							uni.setStorageSync(that.paramsInfo.fireFacilitiesId,
								params); // 没有网络的情况下，把数据保存到本地(根据消防设施id存储)
							uni.showModal({
								title: '温馨提示',
								content: '数据已保存到本地，请连接网络后再次上传！',
								confirmText: '我知道了', // 确认按钮文字
								showCancel: false, // 是否显示取消按钮，默认为 true
								confirmColor: '#3178FF',
								success: res => {
									if (res.confirm) {
										that.$refs.loading.closeLoading();
										that.$pageJump.navigateBack(); // 返回上一层
									}
								}
							});
							return;
						} else {
							if (that.cacheState) {
								uni.showModal({
									title: '温馨提示',
									content: '提交后将会覆盖之前已填写的数据，但会保留执业过程拍摄的图片，请确认是否提交？',
									confirmText: '确认', // 确认按钮文字
									cancelText: '取消',
									confirmColor: '#3178FF',
									success: res => {
										if (res.confirm) {
											that.saveParams.attachs = []; // 清空要提交照片的数据
											let imgsNumList = [];
											that.cacheDevicePics.map(res => {
												if (res.tips == 1) {
													imgsNumList.push(res); // 新拍的照片
												} else if (res.tips == 2) {
													// 系统返回的照片
													that.saveParams.attachs.push({
														id: res.id,
														maintenanceId: that
															.paramsInfo.id,
														maintenanceBuildingId: that
															.paramsInfo
															.maintenanceBuildingId,
														facilitiesTypeId: that
															.paramsInfo
															.facilitiesTypeId,
														attachUrl: res.attachUrl,
														attachName: 'oldImgs'
													});
												}
											});
											that.uploadImgsNum = imgsNumList.length; // 上传照片的总长度
											that.uploadNewImgs = imgsNumList // 新拍的照片----存储起来
											if (that.uploadImgsNum == 0) {
												that.updateMainFacilitiesImgs(); // 保存数据---提交后台
											} else {
												// 异步循环多张照片同时上传（tips==1是新拍的照片）
												let hanleImgs = that.cacheDevicePics.map(img => {
													if (img.tips == 1) {
														that.uploadOSSImgs(img);
													}
												});
												// 多个任务同时执行
												Promise.all(hanleImgs).then(res => {
													// console.log('上传图片返回--------------', res);
												});
											}
										} else {
											that.$refs.loading.closeLoading()
										}
									}
								});
								return
							} else {
								that.saveParams.attachs = []; // 清空要提交照片的数据
								let imgsNumList = [];
								that.cacheDevicePics.map(res => {
									if (res.tips == 1) {
										imgsNumList.push(res); // 新拍的照片
									} else if (res.tips == 2) {
										// 系统返回的照片
										that.saveParams.attachs.push({
											id: res.id,
											maintenanceId: that.paramsInfo.id,
											maintenanceBuildingId: that.paramsInfo
												.maintenanceBuildingId,
											facilitiesTypeId: that.paramsInfo.facilitiesTypeId,
											attachUrl: res.attachUrl,
											attachName: 'oldImgs'
										});
									}
								});
								that.uploadImgsNum = imgsNumList.length; // 上传照片的总长度
								that.uploadNewImgs = imgsNumList // 新拍的照片----存储起来
								if (that.uploadImgsNum == 0) {
									that.updateMainFacilitiesImgs(); // 保存数据---提交后台
								} else {
									// 异步循环多张照片同时上传（tips==1是新拍的照片）
									let hanleImgs = that.cacheDevicePics.map(img => {
										if (img.tips == 1) {
											that.uploadOSSImgs(img);
										}
									});
									// 多个任务同时执行
									Promise.all(hanleImgs).then(res => {
										// console.log('上传图片返回--------------', res);
									});
								}
							}
						}
					}
				});
			},
			// 上传照片到后台服务器上-------
			uploadOSSImgs(imgInfo) {
				let that = this;
				// that.$uploadImg.uploadImgOSS(res, 9).then(res => {})
				that.$http
					.post({
						url: '/ali/signature', // 上传到阿里服务器上，进行存储
						data: {
							bizType: 9
						}
					})
					.then(res => {
						uni.uploadFile({
							url: res.data.host,
							filePath: imgInfo.attachUrl,
							fileType: 'image',
							name: 'file',
							formData: {
								name: 'test',
								key: res.data.dir + that.paramsInfo.id + '_' + that.paramsInfo
									.facilitiesTypeId + '_' +
									imgInfo.names + '.jpg',
								policy: res.data.policy,
								OSSAccessKeyId: res.data.accessid,
								success_action_status: '200',
								signature: res.data.signature
							},
							success: resOss => {
								if (resOss.statusCode == 200) {
									let target = res.data.host + '/' + res.data.dir + that.paramsInfo.id +
										'_' + that
										.paramsInfo.facilitiesTypeId + '_' + imgInfo.names + '.jpg';
									// console.log('服务器后台返回的图片地址-------', target);
									let attach = {
										id: imgInfo.id,
										maintenanceId: that.paramsInfo.id,
										maintenanceBuildingId: that.paramsInfo.maintenanceBuildingId,
										facilitiesTypeId: that.paramsInfo.facilitiesTypeId,
										attachUrl: target,
										nums: imgInfo.nums,
										attachName: 'newImgs' + imgInfo.names
									};
									that.saveParams.attachs.push(attach);
									that.uploadImgsNum--;
									// console.log('正在上传照片剩余数量--', that.uploadImgsNum);
									if (that.uploadImgsNum == 0) {
										that.updateMainFacilitiesImgs(); // 保存数据---提交后台
									}
								} else {
									//上传失败
									let target = res.data.host + '/' + res.data.dir + that.paramsInfo.id +
										'_' + that
										.paramsInfo.facilitiesTypeId + '_' + imgInfo.names + '.jpg';
									let attach = {
										id: imgInfo.id,
										maintenanceBuildingId: that.paramsInfo.maintenanceBuildingId,
										maintenanceId: that.paramsInfo.id,
										facilitiesTypeId: that.paramsInfo.facilitiesTypeId,
										attachUrl: target,
										nums: imgInfo.nums,
										attachName: 'newImgs' + imgInfo.names
									};
									that.saveParams.attachs.push(attach);
									that.uploadImgsNum--;
									if (that.uploadImgsNum == 0) {
										that.updateMainFacilitiesImgs(); // 保存数据---提交后台
									}
								}
							},
							fail: () => {
								// console.log('uploadImage fail上传失败----------', err);
								let target = res.data.host + '/' + res.data.dir + that.paramsInfo.id +
									'_' + that
									.paramsInfo.facilitiesTypeId + '_' + imgInfo.names + '.jpg';
								let attach = {
									id: imgInfo.id,
									maintenanceBuildingId: that.paramsInfo.maintenanceBuildingId,
									maintenanceId: that.paramsInfo.id,
									facilitiesTypeId: that.paramsInfo.facilitiesTypeId,
									attachUrl: target,
									nums: imgInfo.nums,
									attachName: 'newImgs' + imgInfo.names
								};
								that.saveParams.attachs.push(attach);
								that.uploadImgsNum--;
								if (that.uploadImgsNum == 0) {
									that.updateMainFacilitiesImgs(); // 保存数据---提交后台
								}
							}
						});
					});
			},
			// 保存数据---提交后台
			updateMainFacilitiesImgs() {
				let that = this;
				// 根据nums大小进行排序(上传的照片)
				let sortImgsList = that.saveParams.attachs.sort((a, b) => {
					let idx = 'nums';
					if (a[idx] == null || b[idx] == null) {
						return;
					} else {
						return a[idx] - b[idx];
					}
					return;
				});
				let paramsList = {
					items: that.fireFacilitiesList,
					attachs: sortImgsList
				};
				if (this.handleSave == 1 || this.handleSave == 3) {
					if (that.fireFacilitiesList.length < 1) {
						if (this.handleSave == 1) {
							this.facilitiesOtherAdd(this.addList); // 新增操作
							return;
						}
						if (this.handleSave == 3) {
							this.deleteFacilitiesHandle(); // 删除操作
							return;
						}
						return
					}
				}
				that.$http
					.post({
						url: '/maintenance/updateMainFacilitiesV3',
						data: paramsList
					})
					.then(res => {
						// console.log('保存数据返回的结果', res);
						that.$refs.loading.closeLoading();
						if (res.code == 200) {
							if (this.handleSave == 1) {
								this.facilitiesOtherAdd(this.addList); // 新增操作
								return;
							}
							if (this.handleSave == 3) {
								this.deleteFacilitiesHandle(); // 删除操作
								return;
							}
							uni.removeStorageSync(that.paramsInfo.fireFacilitiesId); // 有网络的情况下，上传成功后删除本地缓存（根据消防设施id存储）
							that.cacheState = false // 有网络的情况下 把缓存状态置灰
							that.$refs.uToast.show({
								title: res.msg,
								type: 'success'
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1,
									success: function() {
										let page = getCurrentPages().pop(); //跳转页面成功之后
										if (!page) return;
										page.onLoad(page.options); // 如果页面存在，则重新刷新页面
									}
								});
							}, 500);
						} else if (res.data == 'PARAMETER_PARSE_EXCEPTION') {
							that.$refs.uToast.show({
								title: '抽查数量必须为正整数',
								type: 'error'
							});
							that.getFireImgListOther(that.paramsInfo.fireFacilitiesId); // 获取执业图片
						} else {
							uni.showModal({
								title: '温馨提示',
								content: res.msg,
								confirmText: '我知道了',
								confirmColor: '#3178FF',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										that.getFireImgListOther(that.paramsInfo
											.fireFacilitiesId); // 获取执业图片
									}
								},
							})
						}
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.fireFacilities {
		padding-bottom: 60rpx;

		&-content {
			&-title {
				padding: 30rpx 20rpx 10rpx;
				margin: 20rpx 20rpx 0;
			}

			&-box {
				margin: 0 20rpx;
				padding: 30rpx;

				&-title {
					color: #0b204b;
				}

				.ff-border-bottom view:first-child {
					color: #0b204b;
				}

				.ff-border-bottom view:last-child {
					width: 460rpx;
					text-align: right;
				}
			}
		}

		&-imgBox {
			padding: 30rpx 20rpx;

			&-img {
				width: 100%;
				height: 140rpx;
			}
		}

		textarea {
			background-color: #f8f8f9;
			padding: 25rpx;
			min-height: 150rpx !important;
			width: 93%;
		}

		.radioText {
			display: inline-block;
			width: 110rpx;
			position: relative;
			left: -40rpx;
			text-align: right;
		}

		.addFireFacilities {
			position: absolute;
			right: 0;
			top: -15rpx;
			line-height: 1;
			background-color: #f5f8ff;
			border: 2rpx solid #3178ff;
			color: #3178ff;
			padding: 16rpx 25rpx;
			border-radius: 12rpx;
			display: inline-block;
		}

		&-but {
			width: 90%;
			margin: 25% 5% 5%;
			padding-bottom: 70rpx;
		}

		.tipsBox {
			&-title {
				padding: 15rpx 20rpx;
				border-radius: 10rpx;
				color: #ffffff;
				background: #3178FF;
				margin-bottom: 15rpx;
				display: inline-block;
			}

			&-content::before {
				content: '';
				position: absolute;
				left: 0;
				top: 28%;
				background: #3178FF;
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
			}
		}
	}

	.textareaHeight {
		height: 200rpx;
	}
</style>